<template>
  <el-row class="page-header">
    <div class="page-header-wrapper">
      <span class="page-title">{{ $route.name || $route.meta.title || '请配置路由title或路由元信息' }}</span>
      <div class="page-header-opt">
        <el-popconfirm
          confirm-button-text="确认"
          cancel-button-text="取消"
          :hide-icon="true"
          @confirm="$router.replace({ path: '/' })"
          title="确认退出当前应用返回首页吗？"
        >
          <el-button type="primary" slot="reference" plain>退出应用</el-button>
        </el-popconfirm>
      </div>
    </div>
  </el-row>
</template>

<script>
  export default {
    props: {
      pageStatus: {
        type: String,
        default: 'body'
      }
    },
    data() {
      return {}
    }
  }
</script>

<style scoped lang="scss">
  .page-header {
    width: 100%;
    box-sizing: border-box;
    ::v-deep .el-button:hover {
      color: #fff !important;
    }
    .page-header-wrapper {
      padding: 24px 20px;
      display: flex;
      justify-content: space-between;
      background-color: #f3f5f7;
      .page-title {
        flex: 1;
        width: 100%;
        color: #101010;
        font-size: 22px;
        font-family: SourceHanSansSC-bold;
      }
      .page-header-opt {
        .el-link:hover {
          padding-left: 10px;
          color: #606266 !important;
        }
      }
    }
  }
</style>
